<template>
  <div>
    <Layout>
      <Sider hide-trigger>
        <Menu
          :active-name="activeName"
          theme="dark"
          width="auto"
          :open-names="[openName]"
          :accordion="true"
        >
          <MenuItem to="/interview" name="/interview">
            <Icon type="ios-navigate"></Icon>仪表盘
          </MenuItem>
          <Submenu name="ms">
            <template slot="title">
              <Icon type="ios-keypad"></Icon>面试相关
            </template>
            <MenuItem to="/ms/mnms" name="/ms/mnms">模拟面试</MenuItem>
            <MenuItem to="/ms/msbd" name="/ms/msbd">面试宝典</MenuItem>
            <MenuItem to="/ms/msbd2" name="/ms/msbd2">面试宝典2</MenuItem>
            <MenuItem to="/ms/msgz" name="/ms/msgz">面试跟踪</MenuItem>
          </Submenu>
          <Submenu name="settings">
            <template slot="title">
              <Icon type="ios-analytics"></Icon>系统设置
            </template>
            <MenuItem to="/settings/users" name="/settings/users">用户设置</MenuItem>
            <MenuItem to="/settings/others" name="/settings/others">其他设置</MenuItem>
          </Submenu>
        </Menu>
      </Sider>
      <Content>
        <router-view></router-view>
      </Content>
    </Layout>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "",
      openName: ""
    };
  },
  methods: {
    getName() {
      this.activeName = this.$route.path;
      this.openName = this.$route.path.split("/")[1];
    }
  },
  created() {
    this.getName();
  }
};
</script>

<style>
.header {
  padding: 0;
}
</style>
